<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>jQ 事件</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
            line-height: 40px;
        }

        .box{
            position: absolute;
            top: 50px;
            left: 50px;
            width: 150px;
            height: 150px;
            background-color: #f00;
        }

        .act {
            background-color: #00f;
        }
    </style>
</head>
<body>
    
    <div class="box"></div>

    <ul>
        <li>li_1</li>
        <li>li_2</li>
        <li>li_3</li>
        <li>li_4</li>
        <li>li_5</li>
        <li>li_6</li>
    </ul>

    <input type="text" class="ipt">
    <script src="../lib/jquery/jquery.min.js"></script>
    <script type="text/javascript">
        var $box = $(".box");

        /*
        $ele.事件名([data], 事件处理函数)
        $ele.on(事件名(可以写多个), [委托元素], [data], 事件处理函数)
            事件处理函数中的this 指向 DOM 元素，而不是绑定事件的 jQ 对象

        jQ 可以给同一个事件绑定多次事件处理函数

        jQ 事件处理函数中的形参 e 和 event 对象 不一样

        jQ 使用事件委托，事件处理函数中的 this 指向委托元素

        off移除元素通过 jQ 绑定的事件
            .off() 移除所有通过 jQ 绑定的事件
            .off(eventType)  移除一类事件
            .off(eventType, functionName)  移除一类事件中某一个具体事件处理函数
            .off(eventType, selector) 移除委托事件
        */

        $box.click(function (){
            console.log("box 被点击了");
        })

        $box.click(function (){
            console.log("box 绑定2");
        })

        $box.click(function (){
            console.log("box 绑定3");
        })

        $box.click({ data: "晴空万里" }, function (e){
            console.log(e.data);
            console.log("this", this);
            console.log("触发事件的元素对象", e.target);
            console.log("绑定事件的元素对象", e.currentTarget);
        })

        $box.on("click", function (){
            console.log("通过on方式绑定的事件");
        })

        $box.on("mouseenter mouseleave", function (e){
            $(this).toggleClass("act");
            console.log(event.type, e.type);
        })

        $box.on("click", { aaa: "on方式传入的值" }, function (e){
            console.log("on 方式传入的值", e.data);            
        })

        $box.on("click", clickHandle);

        function clickHandle(){
            console.log("=========box 绑定的声明事件");
        }

        var $ul = $("ul");

        $ul.on("click", "li", function (e){  
            console.log("事件对象", e.target);
            console.log("this", this);
            $(this).css("color", "#f00");

            $ul.append("<li>li_"+ ($ul.children().length + 1) +"</li>");
        })

        $ul.click(function (){
            console.log("自己添加的事件");
        })

        

        $ul[0].onclick = function (){
            console.log("原生事件", this);
        }


        $(".ipt").on("input", function (){
            console.log("aa");
        })

        // hover mouseenter&mouseleve 的集合
        $box.hover(function (e){
            // 进入元素
            console.log("hover in", e.type);
        }, function (e){
            // 离开元素
            console.log("hover out", e.type);
        })

        $box[0].onclick = function (){
            console.log("原生DOM操作绑定的事件");
        }


        // remove all
        $box.off();

        // remove 某一类
        // $box.off("click mouseenter");

        // remove 事件委托
        // $ul.off("click", "li");

        // remove 特定事件的特定处理函数
        // $box.off("click", clickHandle);
        // $box.off("mouseenter mouseleave");

    </script>
</body>
</html>